<template>
	<view class="header-content" v-if="shopdata">
		<view class="header-card">
			<image :src="getImgSrc(shopdata.logo)" mode="" class="logo"></image>
			<view class="text-content">
				<view class="name">{{i18nLocale=='ug'?shopdata.ug_name:shopdata.cn_name}}</view>
				<view class="footer-content">
					<u-rate :count="count" readonly active-color="#ffa902" gutter="1" inactive-color="#b2b2b2"
						v-model="value"></u-rate>
					<!-- <u-icon name="heart" color="#45bc1b" size="26"></u-icon> -->
					<text>
						<u-icon name="grid" color="#45bc1b" size="26"
							@click="qrFun()"></u-icon>
					</text>
					<!-- <u-icon name="share-square" color="#45bc1b" size="26"></u-icon> -->
				</view>
			</view>
		</view>
		<u-popup :show="code" mode="center" @close="close" @open="open" round="20" bgColor="transparent">
			<view class="canvas-box">
				<canvas v-if="!codeimg" canvas-id="qrcode" style="width:200px;height:200px;" />
				<image v-if="codeimg" :src="codeimg" mode="" style="width:200px;height:200px;"></image>
			</view>
			<view class="footer-title">
				<text>长安可以下载</text>
				<u-icon name="download" color="#fff" size="28"></u-icon>
			</view>
		</u-popup>
		<Haibao ref="poster" style="position: absolute;z-index:99999;" :title="i18nLocale=='ug'?shopdata.ug_name:shopdata.cn_name" subTitle=""
			:headerImg="getImgSrc(shopdata.logo)" :price="12">

		</Haibao>
	</view>
</template>

<script>
	import Address from "@/components/Address.vue"
	import Haibao from '@/components/haibao.vue'
	export default {
		components: {
			Address,
			Haibao
		},
		props: ['shopdata'],
		data() {
			return {
				address: '',
				code: false,
				codeimg: '',
				count: 5,
				value: 5,
			};
		},
		mounted() {

		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			}
		},
		methods: {
			qrFun() {
				let that = this;
				this.$refs.poster.showCanvas();
				// this.code = true;
				
			},
			close() {
				this.code = false;
			},
			open() {

			}
		}

	}
</script>

<style lang="scss" scoped>
	.header-content {
		width: 100%;
		padding: $uni-spacing-padding-sm;
		box-sizing: border-box;

		.header-card {
			display: flex;
			box-sizing: border-box;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-base;
			box-shadow: $uni-bg-shadow;
			margin-top: $uni-spacing-margin-sm;
			padding: $uni-spacing-padding-sm;

			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: $uni-border-radius-sm;
			}

			.text-content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				padding-left: 30rpx;

				.name {
					color: $uni-color-title;
					// font-weight: bold;
				}

				.footer-content {
					display: flex;
					justify-content: space-between;
					text{
						padding:0rpx 20rpx
					}
				}
			}
		}

		.canvas-box {
			padding: 40rpx;
			border-radius: 30rpx;
			background-color: #fff;
		}

		.footer-title {
			color: #fff;
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			font-weight: bold;

			text {
				padding: 0rpx 20rpx;
			}
		}
	}
</style>